import React, { useEffect, useState } from 'react';
import { Button, Cascader, Col, Form, Input, InputNumber, Modal, Radio, Row, Select, message } from 'antd';
import { updUser, addUser } from '@/api/usersApi'
import adressData from '@/utils/adressData.json'
const App = (prpos: any) => {
  const { isModalOpen, setIsModalOpen, modelPrpos: { record, type }, Init } = prpos
  const [form] = Form.useForm();
  useEffect(() => {
    if (type === '新增') {
      form.resetFields()
    } else {
      form.setFieldsValue(record)
    }
  }, [isModalOpen])
  const handleOk = async () => {
    const values = form.getFieldsValue();
    if (type === '新增') {
      await addUser({ ...values })
    } else if (type === '编辑') {
      await updUser({ ...values, _id: record._id })
    }
    Init()
    message.success('操作成功');
    setIsModalOpen(false);
  };
  return (
    <>
      <Modal title={type} open={isModalOpen} onOk={handleOk} okText='确认' cancelText='取消' onCancel={() => setIsModalOpen(false)} forceRender>
        <Form form={form} layout='horizontal' wrapperCol={{ span: 16 }} labelCol={{ span: 4 }}
          initialValues={{ customerType: "个人" }}>
          {type === '新增' && (
            <Form.Item label="客户类型" name="customerType">
              <Radio.Group
                block
                options={[
                  { label: `个人${type}`, value: '个人' },
                  { label: `企业${type}`, value: '企业' },
                ]}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>)}
          <Form.Item label="用户名" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="密码" name="password">
            <Input />
          </Form.Item>
          <Form.Item label="昵称" name="nick">
            <Input />
          </Form.Item>
          <Form.Item label="手机号" name="phone">
            <Input />
          </Form.Item>
          <Form.Item label="身份证号" name="idCard">
            <Input />
          </Form.Item>
          <Form.Item label="租赁天数" name="lastRentDays" >
            <InputNumber size='small' suffix="天" />
          </Form.Item>
          <Form.Item label="信用评分" name="creditScore">
            <InputNumber size='small' suffix="分" />
          </Form.Item>
          {record?.customerType === '企业' && <Form.Item label="企业名称" name="companyName">
            <Input />
          </Form.Item>}
          <Form.Item label="地址" name="address">
            <Cascader options={adressData} placeholder='请选择地址' />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default App;